<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui-problem02</title>
		<link rel="stylesheet" href="js/layui/css/layui.css" />
	</head>
	<body>
		<div class="layui-container">
			<form class="layui-form">
				<hr class="layui-bg-black" />
				<div class="layui-form-item">
					<label class="layui-form-label">姓名:</label>
					<div class="layui-input-inline">
						<input type="text" name='s-name' class="layui-input" placeholder="姓名" lay-verify="^\D" />
					</div>
					<label class="layui-form-label">地址:</label>
					<div class="layui-input-inline">
						<select>
							<option name="s-addr" value="">请选择一个城市</option>
							<option name="s-addr" value="北京">北京</option>
							<option name="s-addr" value="上海">上海</option>
							<option name="s-addr" value="深圳">深圳</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<div class="layui-btn" lay-filter="sel" id='sel'>查找</div>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						<div class="layui-btn" lay-filter="add" id='insert'>添加</div>
					</div>
				</div>
		</div>
		<table id='table' class="layui-table" lay-even lay-skin="line">
			<thread>
				<tr>
					<th style="width:10%">ID</th>
					<th style="width:10%">姓名</th>
					<th style="width:10%">性别</th>
					<th style="width:10%">生日</th>
					<th style="width:10%">爱好</th>
					<th style="width:10%">地址</th>
					<th style="width:10%">备注</th>
					<th style="width:15%">操作</th>
				</tr>
			</thread>
			<tbody id='ttbody'>
			</tbody>
		</table>
		</div>


		<script type="text/jscript" src="js/jquery-3.6.0.js"></script>
		<script type="text/jscript" src="js/layui/layui.js"></script>
		<script type="text/jscript" src="js/problem02_layui.js"></script>
		<script type="text/html" id='insert-html'>
			<form class="layui-form">
					<div class="layui-form-item">
						<label class="layui-form-label">姓名:</label>
						<div class="layui-input-inline">
							<input type="text" name='name' required class="layui-input" placeholder="姓名" lay-verify="required"/>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">性别:</label>
						<div class="layui-input-block">
							<input type="radio" name="sex" value="男" title="男">
							<input type="radio" name="sex" value="女" title="女" checked>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">生日:</label>
						<div class="layui-input-block">
							<input type="text" id='birth' required class="layui-input" placeholder="请输入出生日期" lay-verify="required" />
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">爱好:</label>
						<div class="layui-input-block">
							<input type="checkbox" name="hobby" value="跑步" title="跑步">
							<input type="checkbox" name="hobby" value="游泳" title="游泳" checked>
							<input type="checkbox" name="hobby" value="羽毛球" title="羽毛球" checked>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">地址:</label>
						<div class="layui-input-block">
							<select lay-verify="required">
								<option name="addr" value="">请选择一个城市</option>
								<option name="addr" value="北京">北京</option>
								<option name="addr" value="上海">上海</option>
								<option name="addr" value="深圳">深圳</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item layui-form-text">
					    <label class="layui-form-label">备注:</label>
					    <div class="layui-input-block">
					      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
					    </div>
					 </div>
						
						
					 <div class="layui-form-item">
						<div class="layui-input-block">
							<div class="layui-btn" lay-filter="save" id='save'>确认</div>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
							<div class="layui-btn" lay-filter="close" id='close'>关闭</div>
						</div>
					 </div>
				</form>
		</script>

		<script type="text/html" id="tradd">
			<tr id="tr{{d.id}}">
				<td id="tda{{d.id}}">{{d.id}}</td>;
				<td id="tdb{{d.id}}">{{d.name}}</td>;
				<td id="tdc{{d.id}}">{{d.sex}}</td>;
				<td id="tdd{{d.id}}">{{d.birth}}</td>;
				<td id="tde{{d.id}}">{{d.hobbies}}</td>;
				<td id="tdf{{d.id}}">{{d.addr}}</td>;
				<td id="tdg{{d.id}}">{{d.desc}}</td>;
				<td id="tdh{{d.id}}">
					<a href='javascript:del({{d.id}});' class="layui-btn layui-btn-xs layui-btn-danger">删除</a>
					<a href='javascript:upd({{d.id}});' class="layui-btn layui-btn-xs">修改</a>
				</td>;
			</tr>
		</script>
		<script type="text/html" id="tdd">
			<td id="tda{{d.id}}">{{d.id}}</td>;
			<td id="tdb{{d.id}}">{{d.name}}</td>;
			<td id="tdc{{d.id}}">{{d.sex}}</td>;
			<td id="tdd{{d.id}}">{{d.birth}}</td>;
			<td id="tde{{d.id}}">{{d.hobbies}}</td>;
			<td id="tdf{{d.id}}">{{d.addr}}</td>;
			<td id="tdg{{d.id}}">{{d.desc}}</td>;
			<td id="tdh{{d.id}}">
				<a href='javascript:del({{d.id}});' class="layui-btn layui-btn-xs layui-btn-danger">删除</a>
				<a href='javascript:upd({{d.id}});' class="layui-btn layui-btn-xs">修改</a>
			</td>;
		</script>

	</body>
</html>
